<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    status-icon
    :rules="rules"  
    class="demo-ruleForm"
  >
  <el-form-item  prop="id" v-if="false">
      <el-input v-model="ruleForm.id" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="社区名:" prop="name">
      <el-input v-model="ruleForm.name" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="社区详细地址:" prop="name">
      <el-input v-model="ruleForm.address"  autocomplete="off"/>
    </el-form-item>
    <el-form-item label="社区编号" prop="id">
      <el-input v-model="ruleForm.id" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="社区联系电话" prop="phone">
      <el-input v-model="ruleForm.phone"  autocomplete="off"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">提交</el-button>
      <el-button @click="resetForm()">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  props:{
    current:{
      type: Object
    }
  },
  data() {
    return {
      ruleForm: {},
      rules: {
        id: [
          {
            required: true,
            message: "请输入社区编号",
            trigger: "blur",
          },
          {
            min: 2,
            max: 6,
            message: "长度在2到6个字符",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入新的社区名",
            trigger: "blur",
          }
        ],
        address: [
          {
            required: true,
            message: "请输入社区地址",
            trigger: "blur",
          },
        ],
        phone: [
            {
            required:true,
            message:"请输入电话号码",
            trigger:"blur"
            }
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$axios({
          method: "post",
          url: "http://localhost:8080/nav/admin/communityone/update",
          data:this.$qs.stringify(this.ruleForm)
        }).then(res => {
            console.log(res.data);
            this.persons = res.data;
            if(res.data.code == 1){
              ElMessage('修改成功');
              this.$router.go(-1);
            }else{
              console.log("error");
            }
        })
    },
    resetForm(){
      this.ruleForm.id = "",
      this.ruleForm.name = "",
      this.ruleForm.phone = "",
      this.ruleForm.address = ""
    },
    
  },
  mounted(){
      this.ruleForm = this.current;
    }
};
</script>

<style scoped>
</style>